<template>
  <view style="width: 90%;
  margin-top: 20px;
  margin: auto;">

  <view style="width: 100%; text-align: center;">
  {{leni}}/{{ task.length }}
  
  </view>
    <progress
      :percent="basf"
      stroke-width="10"
      :border-radius="10"
      activeColor="#029d94"    />
    <!-- 按组使用 -->
    <uni-swipe-action>
     <view  v-for="(item,idnex) in task" :key="idnex"
     style="margin-top: 20px;"
     >
      <uni-swipe-action-item
        :right-options="options"
        @click="bindClick(idnex)"
  
      >
    <view :class="{se:item.show,}" style="height:40px;border-radius: 20px;
        background-color: antiquewhite;line-height:
         40px;padding: 0 10px;">

<checkbox-group @change="bai(idnex)">
			
					<view >
            <label style="display: flex;">
            <checkbox  :value="item.show" :checked="item.show" />
            <view >{{item.name}}</view>
          </label>
					</view>
			
			</checkbox-group>
   
    </view>
    
      </uni-swipe-action-item>
     </view>
   
    </uni-swipe-action>
    <button style="background-color: #029d94;
    width: 30%;
    margin-top: 30px;
    " class="button" type:any="primary" @click="toggle()">
    <text style="color: #fff">新增任务</text></button>
  
      <uni-popup type="bottom" ref="message" background-color="#fff" @change="change">
		<!-- ... -->
<view style="padding: 20px;">  <uni-forms ref="form" :modelValue="formData" :rules="rules">
			<uni-forms-item label="任务" name="name">
				<uni-easyinput type="text" v-model="formData.name" placeholder="请输入任务" />
			</uni-forms-item>
			<!-- <uni-forms-item label="邮箱" name="email">
				<input class="input" v-model="formData.email" type="text" placeholder="请输入邮箱" @input="binddata('email',$event.detail.value)" />
			</uni-forms-item> -->
		</uni-forms>
		<button @click="submit">新增</button>
  </view>
  
		</uni-popup>
  </view>
</template>

<script lang="ts" setup>
import {
  onMounted,
  ref,
  reactive,
  getCurrentInstance,
  toRefs,
  computed,
  watchEffect
} from "vue";
import {useCounterStore} from "../../stores/counter";
const counter = useCounterStore();
// 一个计算属性 ref
const task = computed(() => {
  return counter.task;
});


let message:any=ref(null)

const change=()=>{}
let form:any=ref(null)
interface nun{
  show:boolean,
  name:string,
}




   

const bai=(e:number)=>{

  task.value[e].show=!task.value[e].show
 
  
}
let leni=ref(0)
let basf=ref<number|string>(0)


const submit=() =>{
  form.value.validate().then((res:any)=>{
			
    task.value.push({
        show:false,
        name:res.name,
      })

      message.value.close()
			}).catch((err:any) =>{
				console.log('表单错误信息：', err);
			})
		}
const 	formData=reactive({
				name: '',
		
			}) 


      const 	rules=reactive({
				// 对name字段进行必填验证
				name: {
					rules: [{
							required: true,
							errorMessage: '请输入任务',
						},
						{
							minLength: 1,
							maxLength: 10,
							errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
						}
					]
				}})
const 	toggle=()=> {
  message.value.open()
			}
let options = reactive([

  {
    text: "删除",
    style: {
      backgroundColor: "#dd524d",
    },
  },
]);

const bindClick = (e:any) => {
task.value.splice(e,1)
};
watchEffect(()=>{
  task.value=task
  leni.value=task.value.filter((item)=>{
    return item.show
  }).length

  basf.value=(leni.value/task.value.length*100).toFixed(0)

  if(task.value.length) {

  counter.incrementask(task.value)

  }
})
</script>

<style scoped>
.se{color:#666;

  background-color:#c9c8c8 !important;
  text-decoration: line-through;
}
:deep(.button-group--right)  {
  right: -1px;
}
</style>
